@use "sass:math";
/* 宽度 */
@for $x from 0 through 750 {.w-#{$x * 2} {width:$x * 2 + rpx}}
@for $x from 0 through 100 {.w-#{$x}vw {width:$x + vw}}
@for $x from 0 through 100 {.w-#{$x}v {width:$x*1%}}
@for $x from 0 through 750 {.max-w-#{$x} {max-width:$x + rpx}}

/* 高度 */
@for $x from 0 through 1000 {.h-#{$x * 2} {height:$x * 2 + rpx}}
@for $x from 0 through 100 {.h-#{$x}vh {height:$x + vh}}
@for $x from 0 through 100 {.h-#{$x}v {height:$x*1%}}
@for $x from 0 through 1000 {.max-h-#{$x} {max-height:$x + rpx}}


/* 内边距 */
@for $x from 0 through 40 {.p-#{$x * 2} {padding: $x * 2 + rpx}}
@for $x from 0 through 40 {.pt-#{$x * 2} {padding-top: $x * 2 + rpx}}
@for $x from 0 through 40 {.pb-#{$x * 2} {padding-bottom: $x * 2 + rpx}}
@for $x from 0 through 40 {.pl-#{$x * 2} {padding-left: $x * 2 + rpx}}
@for $x from 0 through 40 {.pr-#{$x * 2} {padding-right: $x * 2 + rpx}}
@for $x from 0 through 40 {.px-#{$x * 2} {padding-left: $x * 2 + rpx; padding-right: $x * 2 + rpx}}
@for $x from 0 through 40 {.py-#{$x * 2} {padding-top: $x * 2 + rpx; padding-bottom: $x * 2 + rpx}}
.pb-safe {
	padding-bottom: env(safe-area-inset-bottom);
}
/* 外边距 */
.m-auto{margin:auto;}
@for $x from 0 through 40 {.m-#{$x * 2} {margin: $x * 2 + rpx}}
@for $x from 0 through 40 {.mt-#{$x * 2} {margin-top: $x * 2 + rpx}}
@for $x from 0 through 40 {.mb-#{$x * 2} {margin-bottom: $x * 2 + rpx}}
@for $x from 0 through 40 {.ml-#{$x * 2} {margin-left: $x * 2 + rpx}}
@for $x from 0 through 40 {.mr-#{$x * 2} {margin-right: $x * 2 + rpx}}
@for $x from 0 through 40 {.mx-#{$x * 2} {margin-left: $x * 2 + rpx; margin-right: $x * 2 + rpx}}
@for $x from 0 through 40 {.my-#{$x * 2} {margin-top: $x * 2 + rpx; margin-bottom: $x * 2 + rpx}}


/* 行高,1rpx-1000rpx */
@for $x from 10 through 50 {.lh-#{$x * 2} {line-height:$x * 2 + rpx}}
/* 字体大小,20rpx-80rpx */
@for $x from 10 through 40 {.fs-#{$x * 2} {font-size: $x * 2 + rpx}}
/* 字体粗细，100-900,粒度为100 */
@for $x from 1 through 9 {.fw-#{$x * 100} {font-weight: $x * 100}}

/* uniapp内置字体 */
.ff-1 {font-family: 'Courier New', Courier, monospace}
.ff-2 {font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif}
.ff-3 {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif}
.ff-4 {font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif}
.ff-5 {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
.ff-6 {font-family: 'Times New Roman', Times, serif}
.ff-7 {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
.ff-8 {font-family: Arial, Helvetica, sans-serif}
.ff-9 {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif}
.ff-10 {font-family: Georgia, 'Times New Roman', Times, serif}
.ff-11 {font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.ff-12 {font-family: Verdana, Geneva, Tahoma, sans-serif}
.ff-13 {font-family: cursive}
.ff-14 {font-family: emoji}
.ff-15 {font-family: fangsong}
.ff-16 {font-family: fantasy}
.ff-17 {font-family: inherit}
.ff-18 {font-family: initial}
.ff-19 {font-family: math}
.ff-20 {font-family: monospace}
.ff-21 {font-family: sans-serif}
.ff-22 {font-family: serif}
.ff-23 {font-family: system-ui}
.ff-24 {font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
.ff-25 {font-family: ui-monospace}
.ff-26 {font-family: ui-rounded}
.ff-27 {font-family: ui-sans-serif}
.ff-28 {font-family: ui-serif}
.ff-29 {font-family: unset}

/* 文本对齐 */
.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}

// 背景色加入5种
.bg-primary-1{background-color: #E8F7FF;}
.bg-primary-2{background-color: #E6EBFF;}
// .bg-primary-2{background-color: #BAE4FF;}
.bg-primary-3{background-color: #8BCFFF;}
.bg-primary-4{background-color: #5DB6FF;}
.bg-primary-5{background-color: #2E9AFF;}
.bg-primary,.bg-primary-6{background-color: var(--color-primary);}
.bg-primary-7{background-color: #005FD2;}
.bg-primary-8{background-color: #0045A6;}
.bg-primary-9{background-color: #002E79;}
.bg-primary-10{background-color: #001B4D;}
.bg-primary-important{background-color: var(--color-primary)!important;}

.bg-fff-1{background-color:rgba(255,255,255,0.1);}
.bg-fff-2{background-color:rgba(255,255,255,0.2);}
.bg-fff-3{background-color:rgba(255,255,255,0.3);}
.bg-fff-4{background-color:rgba(255,255,255,0.4);}
.bg-fff-5{background-color:rgba(255,255,255,0.5);}
.bg-fff-6{background-color:rgba(255,255,255,0.6);}
.bg-fff-7{background-color:rgba(255,255,255,0.7);}
.bg-fff-8{background-color:rgba(255,255,255,0.8);}
.bg-fff-9{background-color:rgba(255,255,255,0.9);}
.bg-fff{background-color:rgba(255,255,255,1);}

.bg-success-1{background-color: #E8FFEF;}
.bg-success-2{background-color: #B2F3C9;}
.bg-success-3{background-color: #81E6A8;}
.bg-success-4{background-color: #54DA8C;}
.bg-success-5{background-color: #2BCD74;}
.bg-success,.bg-success-6{background-color: var(--color-success);}
.bg-success-7{background-color: #04A457;}
.bg-success-8{background-color: #02874B;}
.bg-success-9{background-color: #016A3E;}
.bg-success-10{background-color: #004D2F;}
.bg-success-important{background-color: var(--color-success)!important;}

.bg-warning-1{background-color: #FFFBE8;}
.bg-warning-2{background-color: #FBEEBA;}
.bg-warning-3{background-color: #F8DF8C;}
.bg-warning-4{background-color: #F4CD60;}
.bg-warning-5{background-color: #F1B836;}
.bg-warning,.bg-warning-6{background-color: var(--color-warning);}
.bg-warning-7{background-color: #C57F07;}
.bg-warning-8{background-color: #9D6004;}
.bg-warning-9{background-color: #754301;}
.bg-warning-10{background-color: #4D2900;}
.bg-warning-important{background-color: var(--color-warning)!important;}

.bg-error-1{background-color: #FFEDE8;}
.bg-error-2{background-color: #F7CEC5;}
.bg-error-3{background-color: #F0AFA5;}
.bg-error-4{background-color: #E88F85;}
.bg-error-5{background-color: #E17068;}
.bg-error,.bg-error-6{background-color: var(--color-danger);}
.bg-error-7{background-color: #B63030;}
.bg-error-8{background-color: #931A1E;}
.bg-error-9{background-color: #700A11;}
.bg-error-10{background-color: #4D0008;}
.bg-error-important{background-color: var(--color-danger)!important;}

.bg-info-1{background-color: #ffffff;}
.bg-info-2{background-color: #f7f8fa;}
.bg-info-3{background-color: #f2f3f5;}
.bg-info-4{background-color: #e5e6eb;}
.bg-info-5{background-color: #c9cdd4;}
.bg-info-6{background-color: #a9aeb8;}
.bg-info-7{background-color: #86909c;}
.bg-info-8{background-color: #6b7785;}
.bg-info-9{background-color: #4e5969;}
.bg-info-10{background-color: #272e3b;}
.bg-info-11{background-color: #1d2129;}
.bg-info-12{background-color: #141414;}

/* 背景颜色,完整循环有16777216种颜色,这里只列出基础色,可以根据项目自行加入常用色 */
.bgc-fff{background: #ffffff}
.bgc-eee{background: #eeeeee}
.bgc-ddd{background: #dddddd}
.bgc-ccc{background: #cccccc}
.bgc-bbb{background: #bbbbbb}
.bgc-aaa{background: #aaaaaa}
.bgc-999{background: #999999}
.bgc-888{background: #888888}
.bgc-777{background: #777777}
.bgc-666{background: #666666}
.bgc-555{background: #555555}
.bgc-444{background: #444444}
.bgc-333{background: #333333}
.bgc-222{background: #222222}
.bgc-111{background: #111111}
.bgc-000{background: #000000}

// 字体颜色
.color-primary-1{color: #E8F7FF;}
.color-primary-2{color: #BAE4FF;}
.color-primary-3{color: #8BCFFF;}
.color-primary-4{color: #5DB6FF;}
.color-primary-5{color: #2E9AFF;}
.color-primary,.color-primary-6{color: #007AFF;}
.color-primary-7{color: #005FD2;}
.color-primary-8{color: #0045A6;}
.color-primary-9{color: #002E79;}
.color-primary-10{color: #001B4D;}

.color-success-1{color: #E8FFEF;}
.color-success-2{color: #B2F3C9;}
.color-success-3{color: #81E6A8;}
.color-success-4{color: #54DA8C;}
.color-success-5{color: #2BCD74;}
.color-success,.color-success-6{color: #07C160;}
.color-success-7{color: #04A457;}
.color-success-8{color: #02874B;}
.color-success-9{color: #016A3E;}
.color-success-10{color: #004D2F;}

.color-warning-1{color: #FFFBE8;}
.color-warning-2{color: #FBEEBA;}
.color-warning-3{color: #F8DF8C;}
.color-warning-4{color: #F4CD60;}
.color-warning-5{color: #F1B836;}
.color-warning,.color-warning-6{color: #EDA20C;}
.color-warning-7{color: #C57F07;}
.color-warning-8{color: #9D6004;}
.color-warning-9{color: #754301;}
.color-warning-10{color: #4D2900;}

.color-error-1{color: #FFEDE8;}
.color-error-2{color: #F7CEC5;}
.color-error-3{color: #F0AFA5;}
.color-error-4{color: #E88F85;}
.color-error-5{color: #E17068;}
.color-error,.color-error-6{color: #D9514C;}
.color-error-7{color: #B63030;}
.color-error-8{color: #931A1E;}
.color-error-9{color: #700A11;}
.color-error-10{color: #4D0008;}

.color-info-1{color: #ffffff;}
.color-info-2{color: #f7f8fa;}
.color-info-3{color: #f2f3f5;}
.color-info-4{color: #e5e6eb;}
.color-info-5{color: #c9cdd4;}
.color-info-6{color: #a9aeb8;}
.color-info-7{color: #86909c;}
.color-info-8{color: #6b7785;}
.color-info-9{color: #4e5969;}
.color-info-10{color: #272e3b;}
.color-info-11{color: #1d2129;}
.color-info-12{color: #141414;}
/* 文本颜色,完整循环有16777216种颜色,这里只列出基础色,可以根据项目自行加入常用色 */
.c-fff{color: #ffffff}
.c-fff-important{color: #ffffff!important;}
.c-eee{color: #eeeeee}
.c-ddd{color: #dddddd}
.c-ccc{color: #cccccc}
.c-bbb{color: #bbbbbb}
.c-aaa{color: #aaaaaa}
.c-999{color: #999999}
.c-888{color: #888888}
.c-777{color: #777777}
.c-666{color: #666666}
.c-555{color: #555555}
.c-444{color: #444444}
.c-333{color: #333333}
.c-222{color: #222222}
.c-111{color: #111111}
.c-000{color: #000000}

/* 遮罩 */
.bgc-mask{background: rgba(0,0,0,.5)}

/* z-index层级*/
.z-1 {
	z-index: 1;
}

.z-2 {
	z-index: 2;
}

.z-3 {
	z-index: 3;
}

.z-4 {
	z-index: 4;
}

.z-5 {
	z-index: 5;
}

.z-6 {
	z-index: 6;
}

.z-7 {
	z-index: 7;
}

.z-8 {
	z-index: 8;
}

.z-9 {
	z-index: 9;
}

.z-10 {
	z-index: 10;
}

.z-990 {
	z-index: 990;
}

.z-991 {
	z-index: 991;
}

.z-992 {
	z-index: 992;
}

.z-993 {
	z-index: 993;
}

.z-994 {
	z-index: 994;
}

.z-995 {
	z-index: 995;
}

.z-996 {
	z-index: 996;
}

.z-997 {
	z-index: 997;
}

.z-998 {
	z-index: 998;
}

.z-999 {
	z-index: 999;
}


.z--1 {
	z-index: -1;
}

.z--2 {
	z-index: -2;
}

.z--3 {
	z-index: -3;
}

.z--4 {
	z-index: -4;
}

.z--5 {
	z-index: -5;
}

.z--6 {
	z-index: -6;
}

.z--7 {
	z-index: -7;
}

.z--8 {
	z-index: -8;
}

.z--9 {
	z-index: -9;
}

.z--10 {
	z-index: -10;
}



/* 透明度 */
.opacity-0 {opacity: 0}
.opacity-5 {opacity: 0.05}
.opacity-10 {opacity: 0.1}
.opacity-20 {opacity: 0.2}
.opacity-25 {opacity: 0.25}
.opacity-30 {opacity: 0.3}
.opacity-40 {opacity: 0.4}
.opacity-50 {opacity: 0.5}
.opacity-60 {opacity: 0.6}
.opacity-70 {opacity: 0.7}
.opacity-75 {opacity: 0.75}
.opacity-80 {opacity: 0.8}
.opacity-90 {opacity: 0.9}
.opacity-95 {opacity: 0.95}
.opacity-100 {opacity: 1}

/* 阴影 */
.shadow{box-shadow:10rpx 10rpx 20rpx 0rpx rgba(0,0,0,.3)}
.shadow-s{box-shadow: 0 0 8rpx 0 rgba(0,0,0,0.1);}
.shadow-m{box-shadow:10rpx 10rpx 40rpx 0rpx rgba(0,0,0,.1)}
/* 清除所有样式,&::after主要是针对button */
.clearAll{all:unset;&::after {all: unset}}

/* Box Sizing */
.box-border {box-sizing: border-box}
.box-content {box-sizing: content-box}
/* Display */
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.flex {display: flex}
.inline-flex {display: inline-flex}
.hidden {display: none}
/* 溢出 */
.overflow-auto {overflow: auto}
.overflow-hidden {overflow: hidden}
.overflow-visible {overflow: visible}
.overflow-scroll {overflow: scroll; -webkit-overflow-scrolling: touch;}
.overflow-x-auto {overflow-x: auto}
.overflow-y-auto {overflow-y: auto}
.overflow-x-hidden {overflow-x: hidden}
.overflow-y-hidden {overflow-y: hidden}
.overflow-x-visible {overflow-x: visible}
.overflow-y-visible {overflow-y: visible}
.overflow-x-scroll {overflow-x: scroll; -webkit-overflow-scrolling: touch;}
.overflow-y-scroll {overflow-y: scroll; -webkit-overflow-scrolling: touch;}
/* 定位 */
.static {position: static}
.fixed {position: fixed}
.absolute {position: absolute}
.relative {position: relative}
.sticky {position: sticky;top: 0rpx}
/* Top/Right/Bottom/Left */
@for $x from -10 through 50 {.top-#{$x * 2} {top: $x * 2 + rpx}}
@for $x from -10 through 50 {.bottom-#{$x * 2} {bottom: $x * 2 + rpx}}
@for $x from -10 through 50 {.left-#{$x * 2} {left: $x * 2 + rpx}}
@for $x from -10 through 50 {.right-#{$x * 2} {right: $x * 2 + rpx}}
/* 可见性 */
.visible {visibility: visible}
.invisible {visibility: hidden}

/* Flex Direction */
.flex-row {flex-direction: row}
.flex-row-reverse {flex-direction: row-reverse}
.flex-col {flex-direction: column}
.flex-col-reverse {flex-direction: column-reverse}
/* Flex Wrap */
.flex-wrap {flex-wrap: wrap}
.flex-wrap-reverse {flex-wrap: wrap-reverse}
.flex-nowrap {flex-wrap: nowrap}
/* Flex */
.flex-1 {flex: 1 1 0%}
.flex-auto {flex: 1 1 auto}
.flex-initial {flex: 0 1 auto}
.flex-none {flex: none}
/* Flex Grow */
.flex-grow-0 {flex-grow: 0}
.flex-grow {flex-grow: 1}
/* Flex Shrink */
.flex-shrink-0 {flex-shrink: 0}
.flex-shrink {flex-shrink: 1}
.flex-between-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex-around-center {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-x-center {
	display: flex;
	justify-content: center;
}

.flex-y-center {
	display: flex;
	align-items: center;
}

.self-center {
	align-self: center;
}

.grid-column-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: none;
}

.grid-column-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
}

.grid-column-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: none;
}

.grid-column-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: none;
}
/* Order */
.order-1 {order: 1}
.order-2 {order: 2}
.order-3 {order: 3}
.order-4 {order: 4}
.order-5 {order: 5}
.order-6 {order: 6}
.order-7 {order: 7}
.order-8 {order: 8}
.order-9 {order: 9}
.order-10 {order: 10}
.order-11 {order: 11}
.order-12 {order: 12}
.order-first {order: -9999}
.order-last {order: 9999}
.order-none {order: 0}
/* Justify Content */
.justify-start {justify-content: flex-start}
.justify-end {justify-content: flex-end}
.justify-center {justify-content: center}
.justify-between {justify-content: space-between}
.justify-around {justify-content: space-around}
.justify-evenly {justify-content: space-evenly}
/* Justify Items */
.justify-items-start {justify-items: start}
.justify-items-end {justify-items: end}
.justify-items-center {justify-items: center}
.justify-items-stretch {justify-items: stretch}
/* Justify Self */
.justify-self-auto {justify-self: auto}
.justify-self-start {justify-self: start}
.justify-self-end {justify-self: end}
.justify-self-center {justify-self: center}
.justify-self-stretch {justify-self: stretch}
/* Align Content */
.content-center {align-content: center}
.content-start {align-content: flex-start}
.content-end {align-content: flex-end}
.content-between {align-content: space-between}
.content-around {align-content: space-around}
.content-evenly {align-content: space-evenly}
/* Align Items */
.items-start {align-items: flex-start}
.items-end {align-items: flex-end}
.items-center {align-items: center}
.items-baseline {align-items: baseline}
.items-stretch {align-items: stretch}
/* Align Self */
.self-auto {align-self: auto}
.self-start {align-self: flex-start}
.self-end {align-self: flex-end}
.self-center {align-self: center}
.self-stretch {align-self: stretch}
.self-baseline {align-self: baseline}

/* 文本装饰 */
.underline {text-decoration: underline}
.line-through {text-decoration: line-through}
.no-underline {text-decoration: none}
/* 文本转换 */
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
.normal-case {text-transform: none}
.break-word {white-space:pre-wrap;word-wrap:break-word;}//强制换行,保留空格
/* 文本溢出 */
.text-hidden-1 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.text-hidden-2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all}
.text-nowrap {white-space: nowrap}

/* 边框 */
// 边框颜色
.border-primary-1{border:1px solid #E8F7FF;}
.border-primary-2{border:1px solid #BAE4FF;}
.border-primary-3{border:1px solid #8BCFFF;}
.border-primary-4{border:1px solid #5DB6FF;}
.border-primary-5{border:1px solid #2E9AFF;}
.border-primary,.border-primary-6{border:1px solid #007AFF;}
.border-primary-7{border:1px solid #005FD2;}
.border-primary-8{border:1px solid #0045A6;}
.border-primary-9{border:1px solid #002E79;}
.border-primary-10{border:1px solid #001B4D;}

.border-success-1{border:1px solid #E8FFEF;}
.border-success-2{border:1px solid #B2F3C9;}
.border-success-3{border:1px solid #81E6A8;}
.border-success-4{border:1px solid #54DA8C;}
.border-success-5{border:1px solid #2BCD74;}
.border-success,.border-success-6{border:1px solid #07C160;}
.border-success-7{border:1px solid #04A457;}
.border-success-8{border:1px solid #02874B;}
.border-success-9{border:1px solid #016A3E;}
.border-success-10{border:1px solid #004D2F;}

.border-warning-1{border:1px solid #FFFBE8;}
.border-warning-2{border:1px solid #FBEEBA;}
.border-warning-3{border:1px solid #F8DF8C;}
.border-warning-4{border:1px solid #F4CD60;}
.border-warning-5{border:1px solid #F1B836;}
.border-warning,.border-warning-6{border:1px solid #EDA20C;}
.border-warning-7{border:1px solid #C57F07;}
.border-warning-8{border:1px solid #9D6004;}
.border-warning-9{border:1px solid #754301;}
.border-warning-10{border:1px solid #4D2900;}

.border-error-1{border:1px solid #FFEDE8;}
.border-error-2{border:1px solid #F7CEC5;}
.border-error-3{border:1px solid #F0AFA5;}
.border-error-4{border:1px solid #E88F85;}
.border-error-5{border:1px solid #E17068;}
.border-error,.border-error-6{border:1px solid #D9514C;}
.border-error-7{border:1px solid #B63030;}
.border-error-8{border:1px solid #931A1E;}
.border-error-9{border:1px solid #700A11;}
.border-error-10{border:1px solid #4D0008;}

.border-info-1{border:1px solid #ffffff;}
.border-info-2{border:1px solid #f7f8fa;}
.border-info-3{border:1px solid #f2f3f5;}
.border-info-4{border:1px solid #e5e6eb;}
.border-info-5{border:1px solid #c9cdd4;}
.border-info-6{border:1px solid #a9aeb8;}
.border-info-7{border:1px solid #86909c;}
.border-info-8{border:1px solid #6b7785;}
.border-info-9{border:1px solid #4e5969;}
.border-info-10{border:1px solid #272e3b;}
.border-info-11{border:1px solid #1d2129;}
.border-info-12{border:1px solid #141414;}

// css设置borer宽度
.border-0{border: 0}
@for $x from 0 through 50 {.border-w-#{$x} {border-width:$x + rpx}}


/* 圆角,支持50%,支持0-50的偶数 */
.rd{border-radius: 50%}
@for $x from 0 through 50 {.rd-#{$x * 2} {border-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-t-#{$x * 2} {border-top-left-radius: $x * 2 + rpx;border-top-right-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-r-#{$x * 2} {border-top-right-radius: $x * 2 + rpx;border-bottom-right-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-b-#{$x * 2} {border-bottom-left-radius: $x * 2 + rpx;border-bottom-right-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-l-#{$x * 2} {border-top-left-radius: $x * 2 + rpx;border-bottom-left-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-t-l-#{$x * 2} {border-top-left-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-t-r-#{$x * 2} {border-top-right-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-b-l-#{$x * 2} {border-bottom-left-radius: $x * 2 + rpx}}
// @for $x from 0 through 50 {.rounded-b-r-#{$x * 2} {border-bottom-right-radius: $x * 2 + rpx}}



/* 旋转 */
@for $x from 0 through 12 {.rotate-#{$x * 15} {transform: rotate($x * 15 + deg)}}
/* 过渡 */
@for $x from 0 through 30 {.transition-#{$x} {transition:all math.div($x, 10)+s}}
/* 旋转 */
@keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}
.animate-spin {animation: spin 1s linear infinite}
@for $x from 0 through 50 {.animate-spin-#{$x} {animation: spin math.div($x, 10)+s linear infinite}}
/* 波纹 */
 @keyframes ping {75%, 100% {transform: scale(2); opacity: 0}}
.animate-ping {animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite}
@for $x from 0 through 50 {.animate-ping-#{$x} {animation: ping math.div($x, 10)+s cubic-bezier(0, 0, 0.2, 1) infinite}}
/* 脉冲 */
@keyframes pulse { 0%, 100% {opacity: 1} 50% {opacity: .5}}
.animate-pulse {animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite}
@for $x from 0 through 50 {.animate-pulse-#{$x} {animation: pulse math.div($x, 10)+s infinite}}
/* 反弹 */
@keyframes bounce {
 0%, 100% {transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1)}
 50% {transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1)}
}
.animate-bounce {animation: bounce 1s infinite}
@for $x from 0 through 50 {.animate-bounce-#{$x} {animation: bounce math.div($x, 10)+s infinite}}
/* 大小 */
 @keyframes shrink {0%, 100% {transform: scale(.5)} 50% {transform: scale(1.2)}  }
.animate-shrink {animation: shrink 1s linear infinite}
@for $x from 0 through 50 {.animate-shrink-#{$x} {animation: shrink math.div($x, 10)+s linear infinite}}

// 置灰操作
.grayscale{
	filter: grayscale(1);
}